<template>
  <div>
    <div class="search">
      <span>维修单号:</span>
      <el-input
        style="width: 10%; margin: 0 0 0 1%"
        v-model="query.id"
        placeholder="请输入内容"
        size="small"
        @input="input1"
      ></el-input>
      <span style="margin: 0 0 0 1%">收货人 :</span>
      <el-input
        style="width: 10%; margin: 0 0 0 1%"
        v-model="query.names"
        placeholder="请输入内容"
        size="small"
        @input="input2"
      ></el-input>
      <span style="margin: 0 0 0 1%">维修单状态:</span>
      <el-select
        v-model="query.status"
        placeholder="请选择"
        style="margin: 0 0 0 1%"
        size="small"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        size="small"
        style="margin: 0 0 0 1%"
        @click="search"
        >搜索</el-button
      >
    </div>
    <div class="table">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="维修订单号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="names" label="收货人"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="passId" label="快递单号"> </el-table-column>
        <el-table-column prop="passName" label="快递公司"> </el-table-column>
        <el-table-column prop="times" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="control" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="open(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>

    <dialogView ref="dialog" />
  </div>
</template>

<script>
import { getFixList } from "../../api/shop";
import dialogView from "./dialogView.vue";
export default {
  components: {
    dialogView,
  },
  data() {
    return {
      query: {
        username: "",
        id: "",
        names: "",
        status: "",
      },
      tableData: [],
      pagination: {
        total: 0,
        current: 1,
      },
      options: [
        {
          value: "1",
          label: "已寄出",
        },
        {
          value: "2",
          label: "已收到",
        },
        {
          value: "3",
          label: "已发出",
        },
        {
          value: "4",
          label: "已签收",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    input1() {},
    input2() {},
    search() {
      this.getList();
    },
    getList() {
      let obj = {
        id: this.query.id,
        names: this.query.names,
        type: "2",
        status: this.query.status,
        pageNo: this.pagination.current,
      };
      getFixList(obj).then((res) => {
        if (res.code == 200) {
          console.log(res, "res");
          this.tableData = res.data.data;
          this.pagination.total = res.data.length;
        }
      });
    },
    handleCurrentChange(e) {
      this.pagination.current = e;
      this.getList();
    },
    open(e) {
      this.$refs.dialog.dialogVisible = true;
      this.$refs.dialog.form = Object.assign(this.$refs.dialog.form, e);
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 2% 0 0 5%;
}
.table {
  width: 90%;
  margin: 2vw auto;
}
</style>
